<template>
  <div class="sign_wrap"  v-if="!imgSrc">
       <h1>签名设计中心</h1> 
   <el-form label-width="110px" :model="formModel" :rules="rules" ref="formRef" >
      <el-form-item label="选择背景色">
         <el-color-picker v-model="formModel.backColor" />
      </el-form-item>
      <el-form-item label="选择字体颜色">
         <el-color-picker v-model="formModel.fontColor" />
      </el-form-item>
      <el-form-item label="阴影颜色">
         <el-color-picker v-model="formModel.shadowColor" />
      </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="formModel.name"></el-input>
      </el-form-item>
      <el-form-item label="选择签名类型" prop="catId">
         <el-select v-model="formModel.catId">
          <el-option v-for="item in state.signOpt" :key="item.value"
          :label="item.label" :value="item.value">
            {{item.label}}
          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
          <el-button type="success" @click="toSubmit">确认生成</el-button>
       </el-form-item>
   </el-form>

  </div>
  <div class="sign_img" v-if="imgSrc">
          <img :src="'data:image/png;base64,'+imgSrc" alt="">
   </div>
   <qrCode :value="text" :color="color" :size="size"></qrCode>
</template>

<script setup>
     import {reactive,ref} from 'vue'
    //  vue 二维码生成插件
     import qrCode from './qrCode.vue'
     import axios from 'axios'
     let imgSrc=ref("")//生成签名图片的地址
    //  整个v-model的数据
    let formModel=reactive({
          backColor:"",
          fontColor:"",
          shadowColor:"",
          name:"",
          catId:""
    })
    let rules={
        name:[{required:"true",message:"请输入名字",trigger:"blur"}], 
        catId:[{required:"true",message:"签名类型必须的",trigger:"blur"}], 
    }
    // 下拉框的数据
     let state=reactive({
         signOpt:[{
          value:"901",
          label:"一笔艺术签"
         },
        {
            value:"904",
          label:"商务签"
        },
        {
              value:"905",
            label:"一笔商务签"
          }
      ]
     })
    //  生成签名图片 
    let formRef=ref()
     let toSubmit=()=>{

        // v3 表单验证方法
        formRef.value.validate().then(()=>{
             axios({
              url:"https://www.haotechs.cn/ljh-wx/api/signArt",
              method:"post",
              data:formModel
             }).then(res=>{
              console.log(res,"-=-----签名数据")
               imgSrc.value=res.data.result;
               console.log( imgSrc.value,"图片地址")
             })
        }).catch(err=>{
          
        })

     }

    //  准备三个父传子的数据
    let text=ref('https://www.baidu.com/s?wd=%E7%BE%8E%E5%A5%B3&rsv_spt=1&rsv_iqid=0xcabfb71600073f87&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=02003390_33_hao_pg&rsv_dl=tb&rsv_enter=1&rsv_sug3=20&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=%25E7%25BE%258E%25E5%25A5%25B3&rsp=4&inputT=4970&rsv_sug4=5606');

    let color=ref("#ff0000")
    let size=ref(300)
    
</script>
<style lang="less">
    .sign_wrap{
      width: 500px;
      height: 500px;
      margin: 20px auto;
    }
</style>